<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button onclick="startRecord()">开始录制</button>
    <button onclick="downloadBlobButton()">下载blob</button>
    <video id="localVideo" autoplay playsinline muted></video>
    <script>
        // 录制媒体流
        async function startRecord() {
            const kbps = 1024
            const Mbps = kbps * kbps
            let video = document.querySelector("video");
            function successCallback(stream) {
                // 将返回的流提供给控制台进行检查
                window.stream = stream;
                console.log(stream)
                video.srcObject = stream;
                // 播放
                video.play();
            }
            navigator.mediaDevices.getUserMedia({
                audio: true,
                video: true,
            }).then(function (localStream) {
                let video = document.querySelector("video");
                video.srcObject = localStream
                video.play()
                let options = {
                    audio: false, video: true, video: {
                        width: 700,
                        height: 500,
                        frameRate: { ideal: 30, max: 30 }
                    },
                };

                window.localStream = localStream
                const mediaRecorder = new MediaRecorder(localStream, options)
                mediaRecorder.start()
                mediaRecorder.onError = (e) => {
                    console.log("报错原因：" + e)
                }
                mediaRecorder.ondataavailable = (e) => {
                    const blob = new Blob([e.data], { type: 'video/mp4' })
                    window.blob = blob
                }

                // 该事件会在媒体录制结束时触发
                mediaRecorder.onstop = (e) => {
                    // 停止录制
                }
            })
                .catch(function (err) {
                    console.log(err)
                });


        }

        // 下载 Blob
        function downloadBlob(blob) {
            const url = URL.createObjectURL(blob)
            const a = document.createElement('a')
            a.href = url
            a.download = `${new Date().getTime()}.${blob.type.split('/')[1]}`
            a.click()
            // 释放 URL 地址
            URL.revokeObjectURL(url)
        }
        function downloadBlobButton() {
            window.localStream.getTracks().forEach(element => {
                element.stop()
            });
            setTimeout(() => {
                blob = window.blob
                const url = URL.createObjectURL(blob)
                const a = document.createElement('a')
                a.href = url
                a.download = `${new Date().getTime()}.${blob.type.split('/')[1]}`
                a.click()
                // 释放 URL 地址
                URL.revokeObjectURL(url)
            }, 0)
        }


    </script>

</body>

</html>